<template>
    <div class="movie">
        <h1>猫眼电影</h1>
        <ul>
            <li v-for="item in movie" :key="item.id">
                <img :src="item.img" alt="">
                <h3>{{ item.nm  }}</h3>
                <h3>{{ item.desc  | sub(20)}}</h3>
                <h3>{{ item.cat }}</h3>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {

        name:"Movie",
        data(){
            return{
                movie:[]
            }
        },
        async mounted(){
            let result = await this.$axios.get("/vue/api/mmdb/movie/v3/list/hot.json?ct=%E8%A5%BF%E5%AE%89&ci=42&channelId=4");

            // console.log(result.data.data.hot);
            
            this.movie = result.data.data.hot;
        }

    }
</script>

<style scoped>
h1{
    color: firebrick;
    text-align: center;
}

.movie ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.movie ul li{
    width: 300px;
    height: 200px;
    margin: 20px;
    text-align: center;
    border: 1px dashed firebrick;
}

.movie ul li img{
    width: 100px;
    height: 100px;
    
}
</style>